<template >
  <div id="introduction" style="overflow-y: scroll; height: 100vh;">
    <section class="hero">
      <div class="container">
        <h1>欢迎来到我们的公司</h1>
        <p>提供优质的解决方案和服务</p>
        <button @click="goToAboutUs">了解更多</button>
      </div>
    </section>

    <div class="about-us" id="about-us">
      <!-- 标题部分 -->
      <div class="header" id="header">
        <h1>亦木简介</h1>
        <h3>亦木良品，美学无醛板</h3>
      </div>

      <!-- 内容布局 -->
      <div class="content" id="content">
        <!-- 左侧图片 -->
        <div class="image-container">
          <img src="@/assets/picture/addressBack.jpg" alt="Building Image" />
        </div>

        <!-- 右侧文字内容 -->
        <div class="text-container">
          <p>
            亦木良品，携手地方定制家居品牌，致力为家居生活空间提供专业健康材料甄选服务。以“东方美，保终身”的美学标准和品质承诺为战略内核，以数字化驱动为经营策略，构建门墙柜材料一体化的仓储服务全新模式——“现货仓储，一站式采购”的服务理念，成为行业发展的新标杆。
          </p>
          <p>
            通过战略宣言总仓、道布局，创建“七位一体”独特价值链，打造了涵盖板材、封边、门配、五金、培育、软件在内的大服务系统，并根据业内现状，首创适用整个行业发展的“S2B2C”的创新商业模式，为全屋定制行业提供产品研发、品牌运营、设计应用、管理培训、材料输出等全方位赋能服务，为地方家居品牌生态升级提供精细化。
          </p>
          <p>
            全流程、高价值打造，实现消费者对美好家居生活的美好想象。
          </p>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Footer from "@/views/main/Footer.vue";

export default {
  name: 'CompanyIntro',
  components: {Footer},
  methods: {
    goToAboutUs() {
      // 使用 Vue Router 的 push 方法跳转到亦木简介部分
      // 这里假设你的亦木简介部分有一个名为 'about-us' 的锚点
      this.$nextTick(() => {
        const aboutUsElement = document.getElementById('about-us');
        if (aboutUsElement) {
          aboutUsElement.scrollIntoView({ behavior: 'smooth' });
        }
      });
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('in-view');
        } else {
          entry.target.classList.remove('in-view');
        }
      });
    });

    observer.observe(document.getElementById('header'));
    observer.observe(document.getElementById('content'));
  },
  beforeDestroy() {
    // 清理工作，取消观察
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        observer.unobserve(entry.target);
      });
    });
  }
}
</script>

<style scoped>
/*.company-intro {
  text-align: center;
  height: 100vh; !* 设置容器高度为视口高度 *!
  overflow-y: auto; !* 添加垂直滚动条 *!
}
.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; !* 继承父容器高度 *!

}
.box-card-header {
  margin-bottom: 20px;
  background-color: rgba(164, 148, 220, 0);
  font-size: 16px;
}
.box-card {
  margin-bottom: 20px;
  background-color: rgba(164, 148, 220, 0.31);
  font-size: 16px;
  border-color: rgba(164, 148, 220, 0);
}
.contact-info {
  margin-top: 5%;
}
.main-bg {
  background-image: url('https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg');
  background-size: cover;
}
.footer-bg {
  width: 100%; !* 宽度设置为100% *!
  margin-top: -60px;
  color: #8594BF;
  background-size: cover;
}*/
.hero {
  text-align: center;
  background: url('@/assets/picture/about_us.jpg') no-repeat center center/cover;
  color: #fff;
  padding: 10rem 0;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero button {
  padding: 0.5rem 1rem;
  background-color: #ff6600;
  border: none;
  color: #fff;
  cursor: pointer;
}
.content-block {
  padding: 2rem;
  background-color: #f9f9f9;
  text-align: center;
}
.content-block h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}



.about-us {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}


.header {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 80px;

  opacity: 0;
  transform: translateY(-50px); /* 初始位置向上偏移 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* 添加过渡效果 */
}

.header.in-view{
  opacity: 1;
  transform: translateY(0); /* 回到原始位置 */
}
.header h1 {
  font-size: 36px;
  color: #2a9d8f;
  margin-bottom: 10px;
}

.header h3 {
  font-size: 18px;
  color: #5c5c5c;
}

.content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;

  opacity: 0;
  transform: translateY(50px); /* 初始位置向上偏移 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* 添加过渡效果 */
}

.content.in-view{
  opacity: 1;
  transform: translateY(0); /* 回到原始位置 */
}

.image-container {
  flex: 1;
  max-width: 500px;
  margin-right: 20px;
}

.image-container img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.text-container {
  flex: 2;
  max-width: 600px;
}

.text-container p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
}

</style>
<!--<script setup lang="ts">-->
<!--</script>-->
<!--<script setup lang="ts">-->
<!--</script>-->